<template>
  <div class="ranklist">
    <div class="title">
      <img src="../assets/images/button_bg.png">
      <p>{{title}}</p>
    </div>
    <div class="list">
      <div :class="['user_rank', {'only': !myRank}]">
        <div class="rank_item" v-for="(item, index) in ranklist" :key="index">
          <div :class="[
              'user_num',
              item.sort <= 3 ? 'no' + item.sort : ''
          ]">
            <i :class="['iconfont', 'icon-svgicontuijian']" v-if="item.sort <= 3"></i>
            <span>{{item.sort}}</span>
          </div>
          <div class="user_head">
            <img :src="item.userHead">
          </div>
          <div class="user_name">{{item.userName}}</div>
          <div class="feast_count">{{item.feastCount}}位宾客</div>
        </div>
      </div>

      <div class="my_rank" v-if="myRank">
        <div :class="[
              'user_num',
              myRank.sort <= 3 ? 'no' + myRank.sort : ''
          ]">
          <i :class="['iconfont', 'icon-svgicontuijian']" v-if="myRank.sort <= 3"></i>
          <span>{{myRank.sort}}</span>
        </div>
        <div class="user_head">
          <img :src="myRank.head">
        </div>
        <div class="user_name">{{myRank.name}}</div>
        <div class="feast_count">{{myRank.feastCount}}位宾客</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ranklist',
    data: function () {
      return {
        ranklist: [],
        myRank: null
      }
    },
    props: ['title', 'user'],
    created: function () {
      axios.get('static/data/ranklist.json').then((res) => {
        this.$set(this, 'ranklist', res.data.ranklist);
      }).catch((error) => {
        console.log(error);
      });
    },
    watch: {
      user: function () {
        axios.get('static/data/my_rank.json?user=' + this.user).then((res) => {
          this.$set(this, 'myRank', res.data.myRank);
        }).catch((error) => {
          console.log(error);
        });
      }
    }
  }
</script>

<style lang="scss">
  @import "../assets/scss/config";

  .ranklist {
    padding-top: setRem(48px);

    .title {
      position: relative;
      width: setRem(230px);
      margin: auto;
      text-align: center;
      height: setRem(45px);

      img {
        position: absolute;
        left: -100%;
        right: -100%;
        top: 0;
        height: setRem(45px);
        margin: auto;
      }

      p {
        color: #E7C598;
        font-size: setRem(20px);
        line-height: setRem(45px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .list {
      position: relative;
      margin: auto setRem(45px);
      font-size: setRem(20px);
      color: #E7C598;
      border: 1px solid #e0a583;
      height: setRem(830px);
      overflow: auto;
      box-sizing: border-box;

      .my_rank, .rank_item {
        position: relative;
        height: setRem(91px);

        > div {
          position: absolute;
          top: setRem(16px);
          bottom: setRem(15px);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: setRem(60px);
        }

        .user_num {
          width: setRem(98px);
          text-align: center;
          padding: 0 setRem(18px);
          box-sizing: border-box;

          &.no1 {
            i {
              color: #ffce00;
            }
          }

          &.no2 {
            i {
              color: #d3d3d3;
            }
          }

          &.no3 {
            i {
              color: #e7c598;
            }
          }

          i {
            position: absolute;
            left: setRem(18px);
            right: setRem(18px);
            top: 0;
            line-height: 1em;
            font-size: setRem(16px);
          }

          span {
            display: block;
            font-size: setRem(28px);
            font-weight: bold;
          }
        }

        .user_head {
          left: setRem(98px);
          width: setRem(60px);
          border-radius: 50%;
          overflow: hidden;

          img {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            max-width: 100%;
            max-height: 100%;
            border-radius: 50%;
          }
        }

        .user_name {
          left: setRem(158px);
          right: setRem(148px);
          padding: 0 setRem(18px);
        }

        .feast_count {
          text-align: right;
          right: setRem(40px);
          width: setRem(108px);
        }
      }

      .user_rank {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: setRem(95px);
        overflow: auto;

        &.only {
          bottom: 0;
        }

        .rank_item {
          border-bottom: 1px solid #e0a583;
        }
      }

      .my_rank {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: setRem(95px);
        background-color: #e0a583;
        color: #bf0c21;
      }
    }
  }
</style>

<style lang="scss" scoped>
</style>
